<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="__STATIC__/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="__STATIC__/css/font.css">
    <link rel="stylesheet" href="__STATIC__/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="__STATIC__/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="__STATIC__/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-table-body .layui-table-cell{
            height:60px;
            line-height: 60px;
        }
    </style>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">朋友圈</a>
        <a>
          <cite>分类</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">&#xe666;</i></a>
</div>
<div class="x-body">
    <input type="hidden" name="type" value="{$type}" class="type">
    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="getCheckData">
                <i class="layui-icon layui-icon-delete"></i>批量删除
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i>添加
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="video">
                <i class="layui-icon layui-icon-camera-fill"></i>视频
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="audio">
                <i class="layui-icon layui-icon-notice"></i>音频
            </button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
    </script>
</div>

<script>
    layui.use('table', function(){
        var type=$(".type").val();
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:'{:url("study/videoListAjax")}'
            ,where:{type:type}
            ,toolbar: '#toolbarDemo'
            ,title: '音视频表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true}
                ,{field:'video_title', title:'标题'}
                ,{field:'video_price', title:'价格'}
                ,{field:'video_logo', title:'logo',templet:function (d) {
                    return '<img src="'+d.video_logo+'" alt="..." width="50px" height="50px" >';
                }}
                ,{field:'video_state', title:'类型',templet:function (d) {
                    if(d.video_state==1){
                        return '<button class="layui-btn layui-btn-sm">音频</button>';
                    }else{
                        return '<button class="layui-btn layui-btn-sm layui-btn-normal">视频</button>';
                    }
                }}
                ,{field:'video_show', title:'上下架',templet:function (d) {
                        if(d.video_show==1){
                            return '<button class="layui-btn layui-btn-sm">下架</button>';
                        }else{
                            return '<button class="layui-btn layui-btn-sm layui-btn-normal">上架</button>';
                        }
                    }}
                ,{field:'video_groom', title:'推荐',templet:function (d) {
                        if(d.video_groom==1){
                            return '<button class="layui-btn layui-btn-sm">推荐</button>';
                        }else{
                            return '<button class="layui-btn layui-btn-sm layui-btn-normal">不推荐</button>';
                        }
                    }}
                ,{field:'video_createtime', title:'创建时间'}
                ,{field:'video_sort', title:'排序'}
                ,{fixed:'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);

            switch(obj.event){
                case 'getCheckData':
                    var event = checkStatus.data;
                    var ids = tableCheckedAllOnly(event);
                    layer.confirm('真的删除?', function(index){
                        $.post('{:url("study/videoDel")}',{id:ids},function (res) {
                            if (res.code){
                                layer.msg(res.msg,{icon:6,time:1000},function () {
                                    table.reload('test');
                                });
                            } else {
                                layer.msg(res.msg,{icon:5,time:3000});
                            }
                        });
                    });
                    break;
                case 'add':
                    x_admin_show('添加','{:url("study/videoAdd")}');
                    break;
                case 'video':
                    location.href='{:url("study/videoList")}';
                    break;
                case 'audio':
                    location.href='{:url("study/videoList")}?type=1';
                    break;
            }
        });


        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){$.post('{:url("study/videoDel")}',{cl_id:data.cl_id},function (res) {
                        if (res.code=='success'){
                            layer.msg(res.msg,{icon:6,time:1000},function () {
                                table.reload('test');
                            });
                        } else {
                            layer.msg(res.msg,{icon:5,time:3000});
                        }
                    });
                });
            } else if(obj.event === 'edit'){
                x_admin_show('修改','{:url("study/videoEdit")}?id='+data.id);
            }
        });
    });
    function tableCheckedAllOnly(data){
        var arr = [];
        for (var i=0; i < data.length ;i++){
            arr.push(data[i].id);
        }
        return arr;
    }
</script>
</body>

</html>